/**
 * Created by Administrator on 2017/2/27.
 */
var Breadcrumb = require('../../../src/libs/breadcrumb');
var Pagination = require('../../../src/libs/pagination');
var Calculator = require('../../../src/libs/calculator');
var ProjectSelect = require('../complex/projectSelect');
var ProjectList = require('../complex/projectList');
var Root = React.createClass({
    getInitialState: function(){
        return {
            pageVal: PageDM.pagination.value,
            projectListVal: PageDM.projectList.value,
            interestVal: PageDM.interest.option[0].value,
            durationVal: PageDM.duration.option[0].value,
            projectStatusVal: PageDM.projectStatus.option[0].value
        }
    },
    interestHandler: function(v){
        PageDM.interest.setValue(v);
        PageDM.interest.onClick();
    },
    durationHandler: function(v){
        PageDM.duration.setValue(v);
        PageDM.duration.onClick();
    },
    projectStatusHandler: function(v){
        PageDM.projectStatus.setValue(v);
        PageDM.projectStatus.onClick();
    },
    componentDidMount: function(){
        var _this = this;
        UEventHub.emit("pageLoad","hello world!");
        UEventHub.on(PageDM.pagination.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            //console.log(v)
            /*_this.setState({
                pageVal: v
            });*/
        });
        UEventHub.on(PageDM.projectList.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                projectListVal: v
            });
        });
        UEventHub.on(PageDM.interest.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                interestVal: v
            });
        });
        UEventHub.on(PageDM.duration.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                durationVal: v
            });
        });
        UEventHub.on(PageDM.projectStatus.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                projectStatusVal: v
            });
        });
        //筛选条件，默认为第一个（全部）
        PageDM.interest.setValue(PageDM.interest.option[0].value);
        PageDM.duration.setValue(PageDM.duration.option[0].value);
        PageDM.projectStatus.setValue(PageDM.projectStatus.option[0].value);
    },
    calculatorHandler: function(){
        this.refs['calculator'].layerOpen();
    },
    render: function(){
        var _this = this;
        //年化利率筛选条件
        var _interest_data = {
            label: "年化利率：",
            selectOption: PageDM.interest.option,
            curVal: _this.state.interestVal
        };
        //投资期限筛选条件
        var _duration_data = {
            label: "投资期限：",
            selectOption: PageDM.duration.option,
            curVal: _this.state.durationVal
        };
        //项目状态筛选条件
        var _projectStatus_data = {
            label: "项目状态：",
            selectOption: PageDM.projectStatus.option,
            curVal: _this.state.projectStatusVal
        }
        return (
            <div>
                <div className="header">
                    <div className="top-bar fc-light">
                        <div className="container">
                            <span>服务热线：0816-2373017</span>
                            <span>服务时间：工作日 9:00-18:00</span>
                            <span className="nav-right">
                                <a href="登录注册/登录.html">登录</a>
                                <a href="登录注册/注册.html">注册</a>
                                <a href="帮助中心/平台介绍.html">帮助中心</a>
                                <a href="index.html">返回绵阳商业银行</a>
                            </span>
                        </div>
                    </div>
                    <div className="header-nav">
                        <div className="container">
                            <div className="logo f-left"><a href="index.html"><img src="../images/logo.jpg" alt="" /> </a><a href="index.html"><img src="../images/logoe.jpg" alt="" /> </a></div>
                            <div className="nav f-right">
                                <ul className="clearfix">
                                    <li><a href="index.html">首页</a></li>
                                    <li><a href="我要投资.html" className="current">我要投资</a></li>
                                    <li><a href="我要借款.html">我要借款</a></li>
                                    <li><a href="账户中心/我的账户.html">我的账户</a></li>
                                </ul>
                            </div>
                            <div className="clear"></div>
                        </div>
                        <div className="shadow"></div>
                    </div>
                </div>
                <div className="container">
                    <Breadcrumb	separator='>' >
                        <Breadcrumb.Item href={PageDM.URL.home}>首页</Breadcrumb.Item>
                        <Breadcrumb.Item>我要投资</Breadcrumb.Item>
                    </Breadcrumb>
                    <div className="mod-filtrate clearfix">
                        <span className="angle angle-top"></span>
                        <span className="angle angle-bottom"></span>
                        <ProjectSelect data={_interest_data} callBack={_this.interestHandler}/>
                        <ProjectSelect data={_duration_data} callBack={_this.durationHandler}/>
                        <ProjectSelect data={_projectStatus_data} callBack={_this.projectStatusHandler}/>
                        <div className="project-calculator"><a href="javascript:;" className="open-calculator" onclick={_this.calculatorHandler.bind(_this)}><i className="bg-icon"></i> <p>投资计算器</p></a></div>
                    </div>
                    <ProjectList projectList={_this.state.projectListVal}/>
                    <Pagination paginationDM={PageDM.pagination} pageVal={_this.state.pageVal}></Pagination>
                </div>
                <div className="footer">
                    <div className="container">
                        <div className="footer-logo f-left">
                            <p className="logo-foot"><img src="../images/foot-logo.png" alt="" /></p>
                            <p className="txt">2005－2013 绵阳市商业银行股份有限公司 <a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备11013283123号</a></p>
                        </div>
                        <div className="footer-nav f-right">
                            <div className="col">
                                <h3>关于我们</h3>
                                <ul>
                                    <li><a href="帮助中心/平台介绍.html">平台介绍</a></li>
                                    <li><a href="帮助中心/名词解释.html">名词解释</a></li>
                                    <li><a href="帮助中心/联系我们.html">联系我们</a></li>
                                    <li><a href="帮助中心/服务协议.html">服务协议</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>安全保障</h3>
                                <ul>
                                    <li><a href="帮助中心/安全保障.html">项目安全</a></li>
                                    <li><a href="帮助中心/安全保障.html">资金安全</a></li>
                                    <li><a href="帮助中心/安全保障.html">信息安全</a></li>
                                    <li><a href="帮助中心/安全保障.html">账户安全</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>帮助中心</h3>
                                <ul>
                                    <li><a href="帮助中心/投资操作指引.html">投资指引</a></li>
                                    <li><a href="帮助中心/融资操作指引.html">融资指引</a></li>
                                    <li><a href="帮助中心/平台公告.html">平台公告</a></li>
                                    <li><a href="javascript:;">常见问题</a></li>
                                </ul>
                            </div>
                            <div className="col col-service">
                                <p>客服专线<br/>0816-2373017</p>
                                <p>服务时间<br/>工作日9:00 - 18:00</p>
                            </div>
                        </div>
                        <div className="clear"></div>
                    </div>
                </div>
                <Calculator ref="calculator"/>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('main'));